<template>
	<a-card>
		<!-- 顶部 -->
		<a-row style="margin-bottom: 1rem">
			<a-col :span="2">
				<a-select
					ref="select"
					v-model:value="this.opStatus"
					style="width: 80%;margin-top: 3px"
					@focus="focus"
					placeholder="状态 :"
				>
					<a-select-option value="0">停用</a-select-option>
					<a-select-option value="1">启用</a-select-option>
					<a-select-option value="">全部</a-select-option>
				</a-select>
			</a-col>
			<!--搜索框-->
			<a-col :span="5">
				<a-input-search
					v-model:value=this.keyword
					placeholder="搜索关键字"
					enter-button="搜索"
					size="large"
					@search="onSearch"
					style="margin-left: 20px;width: 100%"
				/>
			</a-col>
			<a-col :push=this.number :span="5">
				<a-button type="primary" style="height: 40px;margin-left: auto" @click="showDrawer(null)">
					<PlusOutlined/>
					添加宝箱活动
				</a-button>
			</a-col>
		</a-row>
		<!-- 列表 -->
		<a-row style="margin-bottom: 1rem">
			<!--表格-->
			<a-col :span="24">
				<a-table :data-source="data" :columns="columns" :pagination="false" style="margin-bottom: 1rem">
					<template #bodyCell="{column,record}">
						<!--抽奖方式-->
						<template v-if="column.key === 'drawMode'">
							<a-tag :bordered="false">
								{{ record.drawMode == '0' ? "积分抽奖" : "藏品抽奖" }}
							</a-tag>
						</template>
						<!--抽奖消耗-->
						<template v-if="column.key === 'conInte'">
							<a-row v-if="record.drawMode=='0'" style="margin-top: 0.5rem">
								<a-col>
									{{ record.conInte }} 积分
								</a-col>
							</a-row>
							<a-row v-if="record.drawMode=='1'" style="margin-top: 0.5rem"
								   v-for="opNftTreChestVo in record.opNftTreChestVos">
								<a-col>
									<a-image :src="opNftTreChestVo.cover" :width="50" :height="50"/>
								</a-col>
								<a-col style="margin: auto" :span="10">
									<a @click="this.getNftInfo(opNftTreChestVo.nftId)"
									   v-bind:value="opNftTreChestVo.nftId">{{ opNftTreChestVo.nftName }}</a>
									<br/>
									<span>X{{ opNftTreChestVo.nftExpQua }}</span>
								</a-col>
							</a-row>
						</template>
						<!--奖池奖品-->
						<template v-if="column.key==='opTreChestPrizeVos'">
							<a-row v-for="item in record.opTreChestPrizeVos" style="margin-top: 0.5rem">
								<a-col>
									<a-image :src="item.cover" :width="50" :height="50"/>
								</a-col>
								<a-col style="margin: auto" :span="12">
									<a @click="this.getNftInfo(item.nftId)" v-bind:value="item.nftId">{{
											item.nftName
										}}</a>
								</a-col>
							</a-row>
						</template>
						<!--活动时间范围-->
						<template v-if="column.key==='opStartTime'">
							{{ record.opStartTime }}
							<br/>
							至
							<br/>
							{{ record.opEndTime }}
						</template>
						<!--创建时间-->
						<template v-if="column.key==='createTime'">
							{{ record.createTime }}
						</template>
						<!--状态-->
						<template v-if="column.key === 'status'">
							<a-tag v-if="record.status==0" :bordered="false" color="default">停用</a-tag>
							<a-tag v-if="record.status==1" :bordered="false" color="success">启用</a-tag>
						</template>
						<!--操作-->
						<template v-if="column.key === 'action'">
							<a-dropdown>
								<template #overlay>
									<a-menu>
										<a-menu-item key="1" v-if="record.status==0" @click="startOpTre(record.id)">
											启用
										</a-menu-item>
										<a-menu-item key="2" v-if="record.status==1" @click="stopOpTre(record.id)">
											停用
										</a-menu-item>
										<a-menu-item key="3" v-if="record.status==0" @click="showDrawer(record.id)">
											编辑
										</a-menu-item>
										<a-menu-item key="4" @click="getTreChest(record.id)">
											查看
										</a-menu-item>
										<a-menu-item key="5" v-if="record.status==0" @click="delOpTre(record.id)">
											删除
										</a-menu-item>
										<a-menu-item key="6" @click="queryOpLog(record.id)">
											抽奖记录
										</a-menu-item>
									</a-menu>
								</template>
								<a-button>
									操作
									<DownOutlined/>
								</a-button>
							</a-dropdown>
						</template>
					</template>
				</a-table>
			</a-col>
		</a-row>
		<!-- 分页插件 -->
		<a-flex justify="flex-end">
			<a-pagination
				size="small"
				@change="onChange"
				show-size-changer
				:pageSizeOptions="['5','10','20','50','100']"
				v-model:current="this.page.pageNo"
				v-model:page-size="this.page.pageSize"
				:total="this.page.total"
				:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"/>
		</a-flex>
		<!-- 添加宝箱活动抽屉 -->
		<a-drawer
			title="添加宝箱活动"
			:width="750"
			:open="this.open"
			:body-style="{ paddingBottom: '80px' }"
			:footer-style="{ textAlign: 'right' }"
			@close="onClose"
		>
			<!--添加的表单-->
			<a-form :model="this.opTreChestInfoBo" ref="formRef" layout="vertical">
				<!--活动标题和抽奖方式-->
				<a-row :gutter="16">
					<a-col :span="12">
						<a-form-item
							label="活动标题"
							name="opTitle"
							:rules="[{ required: true, message: '活动标题不能为空!' },{min: 1,max:125, message: '您填写的活动标题名称过长'}]"
						>
							<a-input v-model:value="this.opTreChestInfoBo.opTitle" placeholder="请填写活动标题"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							label="抽奖方式"
							name="drawMode"
							:rules="[{ required: true, message: '抽奖方式不能为空!' }]"
						>
							<a-select placeholder="请选择抽奖方式" v-model:value="this.opTreChestInfoBo.drawMode">
								<a-select-option value="0" select>积分抽奖</a-select-option>
								<a-select-option value="1">藏品抽奖</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<!--消耗积分抽奖-->
				<a-row :gutter="16" v-if="this.opTreChestInfoBo.drawMode=='0'">
					<a-col :span="24">
						<a-form-item
							label="抽奖所需积分"
							name="conInte"
							:rules="[{ required: true, message: '抽奖消耗积分不能为空!' }]"
						>
							<a-input-number v-model:value="this.opTreChestInfoBo.conInte"
											placeholder="请填写抽奖所需积分(必须是整数)"
											style="width: 100%" :min="1" :max="100000"/>
						</a-form-item>
					</a-col>
				</a-row>
				<!--消耗藏品抽奖-->
				<a-row :gutter="16" v-if="this.opTreChestInfoBo.drawMode=='1'"
					   v-for="(opNftTreChestBo,index) in this.opTreChestInfoBo.opNftTreChestBos">
					<a-col :span="12">
						<a-form-item
							label="抽奖所需艺术品"
							:name="['opNftTreChestBos',index,'nftId']"
							:rules="[{ required: true, message: '抽奖消耗艺术品不能为空!'}]"
						>
							<a-select
								v-model:value="opNftTreChestBo.nftId"
								show-search
								placeholder="请选择所需艺术品"
								:options="filterInfo.options"
								:field-names="filterInfo.fieldNames"
								option-filter-prop="name"
								@change="this.exp(opNftTreChestBo.nftId)"
							></a-select>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							label="所需艺术品数量"
							:name="['opNftTreChestBos',index,'nftExpQua']"
							:rules="[{ required: true, message: '抽奖消耗艺术品不能为空!'}]"
							@change="reminder(this.expQua,opNftTreChestBo.nftExpQua)"
						>
							<a-input-number placeholder="艺术品数量(必须是整数)"
											v-model:value="opNftTreChestBo.nftExpQua" style="width: 100%" :min="1"
											:max="this.expQua"/>
						</a-form-item>
					</a-col>
				</a-row>
				<!--抽奖次数和活动状态-->
				<a-row :gutter="16">
					<a-col :span="12">
						<a-form-item
							label="抽奖次数"
							name="drawChaNum"
							:rules="[{ required: true, message: '抽奖次数不能为空!' }]"
						>
							<a-input-number placeholder="请填写抽奖次数(必须是整数)"
											v-model:value="this.opTreChestInfoBo.drawChaNum"
											style="width: 100%" :min="1" :max="100"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							label="活动状态 (是:启用 / 否:不启用)"
							name="status"
							:rules="[{ required: true, message: '活动状态不能为空!' }]"
						>
							<a-select placeholder="是否启用该活动" v-model:value="this.opTreChestInfoBo.status">
								<a-select-option value=0>否</a-select-option>
								<a-select-option value=1>是</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<!--活动时间范围-->
				<a-row :gutter="16">
					<a-col :span="12">
						<a-form-item
							label="活动时间范围"
							name="times"
							:rules="[{ required: false, message: '活动时间不能为空!',trigger: 'change'}]"
						>
							<a-space direction="vertical" :size="12">
								<a-range-picker value-format="YYYY-MM-DD HH:mm:ss"
												v-model:value="times" show-time :disabled-date="disabledDate"/>
							</a-space>
						</a-form-item>
					</a-col>
				</a-row>
				<!--奖品设置-->
				<a-row :gutter="16">
					<a-card title="奖品设置" :bordered="true">
						<div v-for="(opTreChestPrizeBo,index) in this.opTreChestInfoBo.opTreChestPrizeBos">
							<a-row>
								<a-col :span="9">
									<a-form-item
										label="选择活动奖品"
										:name="['opTreChestPrizeBos',index,'nftId']"
										:rules="[{ required: true, message: '奖品不能为空!' }]"
									>
										<a-select
											v-model:value="opTreChestPrizeBo.nftId"
											show-search
											placeholder="请选择活动奖品"
											:options="filterInfoUpdate.options"
											:field-names="filterInfoUpdate.fieldNames"
											option-filter-prop="name"
										></a-select>
									</a-form-item>
								</a-col>
								<a-col :span="5" :push="1">
									<a-form-item
										label="数量"
										:name="['opTreChestPrizeBos',index,'prizeQua']"
										:rules="[{ required: true, message: '奖品数量不能为空!' }]"
									>
										<a-input-number placeholder="奖品数量(整数)"
														v-model:value="opTreChestPrizeBo.prizeQua"
														style="width: 100%" :min="1" :max="100000"/>
									</a-form-item>
								</a-col>
								<a-col :span="5" :push="2">
									<a-form-item
										label="抽奖概率"
										:name="['opTreChestPrizeBos',index,'prizeCha']"
										:rules="[{ required: true, message: '概率不能为空!' }]"
									>
										<a-input-number placeholder="抽奖概率(整数)"
														v-model:value="opTreChestPrizeBo.prizeCha"
														style="width: 100%" :min="1" :max="100"/>
									</a-form-item>
								</a-col>
								<a-col :span="3" :push="3">
									<MinusCircleOutlined @click="delPrizeTre(opTreChestPrizeBo)"
														 style="width: 50px;height: 30px;margin-top: 2rem"/>
								</a-col>
							</a-row>
						</div>
						<a-row>
							<a-col :span="23">
								<a-form-item>
									<a-button type="dashed" block @click="addPrizeTre" style="width: 100%">
										<PlusOutlined/>
										新增奖品
									</a-button>
								</a-form-item>
							</a-col>
						</a-row>
					</a-card>
				</a-row>
				<!--活动描述-->
				<a-row :gutter="16" style="margin-top: 2rem">
					<a-card title="活动描述" :bordered="true" style="width: 100%">
						<a-col :span="24">
							<XEditable v-model="this.opTreChestInfoBo.opRemark"
									   placeholder="请输入活动描述"></XEditable>
						</a-col>
					</a-card>
				</a-row>
			</a-form>
			<template #extra>
				<a-space>
					<a-button @click="resetFields">重置</a-button>
					<a-button type="primary" @click="addTreChest()">保存</a-button>
				</a-space>
			</template>
		</a-drawer>
		<!-- 查看宝箱活动详情模态 -->
		<template>
			<div>
				<a-modal v-model:open="this.openGet" title="查看宝箱活动" @ok="onCloseGet" style="width: 50rem">
					<hr/>
					<template #footer>
						<a-button key="submit" type="primary" @click="onCloseGet">确认</a-button>
					</template>
					<a-descriptions title="" :column="1">
						<a-descriptions-item label="活动标题">{{ this.opTreChestVo.opTitle }}</a-descriptions-item>
						<a-descriptions-item label="抽奖方式">{{
								this.opTreChestVo.drawMode == '0' ? "积分抽奖" : "藏品抽奖"
							}}
						</a-descriptions-item>
						<a-descriptions-item label="抽奖消耗">
							<a-row>
								<a-col v-if="this.opTreChestVo.drawMode=='0'">
									{{ this.opTreChestVo.conInte + '积分' }}
								</a-col>
								<a-col v-if="this.opTreChestVo.drawMode=='1'">
									<table>
										<tr v-for="(opNftTreChestVo,index) in this.opTreChestVo.opNftTreChestVos">
											<td>
												<a-image :src="opNftTreChestVo.cover" :width="50" :height="50"/>&nbsp;
												<span @click="getNftInfo(opNftTreChestVo.nftId)">
													{{ opNftTreChestVo.nftName }}&nbsp;
												</span>&nbsp;
												<span>X&nbsp;{{ opNftTreChestVo.nftExpQua }}</span>
											</td>
										</tr>
									</table>

								</a-col>
							</a-row>
						</a-descriptions-item>
						<a-descriptions-item label="抽奖次数:">{{ this.opTreChestVo.drawChaNum }}</a-descriptions-item>
						<a-descriptions-item label="活动状态">{{
								this.opTreChestVo.status == '0' ? "停用" : "启用"
							}}
						</a-descriptions-item>
						<a-descriptions-item label="时间范围:">
							{{ this.opTreChestVo.opStartTime }}
							至
							{{ this.opTreChestVo.opEndTime }}
						</a-descriptions-item>
						<a-descriptions-item label="创建人">{{ this.opTreChestVo.createUser }}</a-descriptions-item>
						<a-descriptions-item label="创建时间">{{ this.opTreChestVo.createTime }}</a-descriptions-item>
						<a-descriptions-item label="更新人">{{ this.opTreChestVo.updateUser }}</a-descriptions-item>
						<a-descriptions-item label="更新时间">{{ this.opTreChestVo.updateTime }}</a-descriptions-item>
						<a-descriptions-item label="">
							<a-card title="奖品设置" style="width: 700px;margin: auto">
								<a-row :gutter="16" style="text-align: center">
									<a-col :span="6">奖品</a-col>
									<a-col :span="6">藏品名称</a-col>
									<a-col :span="6">数量</a-col>
									<a-col :span="6">奖品概率</a-col>
								</a-row>
								<a-row v-for="opTreChestPrizeVo in this.opTreChestVo.opTreChestPrizeVos" :gutter="16"
									   style="text-align: center;margin-top: 2.5rem">
									<a-col :span="6">
										<a-image :src="opTreChestPrizeVo.cover" style="margin-top: -12px" width="3rem"
												 height="3rem"/>
									</a-col>
									<a-col :span="6" @click="getNftInfo(opTreChestPrizeVo.nftId)">{{
											opTreChestPrizeVo.nftName
										}}
									</a-col>
									<a-col :span="6">{{ opTreChestPrizeVo.prizeQua }}</a-col>
									<a-col :span="6">{{ opTreChestPrizeVo.prizeCha }}%</a-col>
								</a-row>
							</a-card>
						</a-descriptions-item>
						<a-descriptions-item label="">
							<a-card title="活动描述" style="width: 700px;margin: auto">
								<a-row :gutter="16">
									<a-col :span="24">
										<div v-html="opTreChestVo.opRemark"></div>
									</a-col>
								</a-row>
							</a-card>
						</a-descriptions-item>
					</a-descriptions>
				</a-modal>
			</div>
		</template>
		<!-- 查询活动抽奖记录 -->
		<template>
			<div>
				<a-modal v-model:open="openGetDrawRemark" title="活动抽奖记录" style="width: 750px">
					<a-row>
						<!--搜索框-->
						<a-col :span="12">
							<a-input-search
								v-model:value=this.nftkeyword
								placeholder="奖品关键字"
								style="width: 70%"
								enter-button="搜索"
								size="large"
								@search="onSearchGet(this.treId)"
							/>
						</a-col>
					</a-row>
					<a-row style="margin-bottom: 1rem">
						<a-col :span="24">
							<a-table :data-source="dataget" :columns="columnsget" :pagination="false"
									 style="margin-bottom: 1rem">
								<template #bodyCell="{column,record}">
									<!--会员-->
									<template v-if="column.key==='userName'">
										<a-row style="margin-top: 1rem;" :gutter="16">
											<!--头像-->
											<a-col :span="12">
												<a-avatar :size="65" :src=record.uuidAvatar>
													<template #icon>
														<UserOutlined/>
													</template>
												</a-avatar>
											</a-col>
											<a-col style="margin-top: 20px">
												<a @click="this.mbInfo(record.mbId)">
													{{ record.userName }}
												</a>
											</a-col>
										</a-row>
									</template>
									<!--抽奖时间-->
									<template v-if="column.key==='inteDrawTime'">
										<a-row v-if="record.drawMode=='0'">
											<a-col v-if="record.inteDrawTime != null">
												{{ record.inteDrawTime }}
											</a-col>
										</a-row>
										<a-row v-if="record.drawMode=='1'">
											<a-col v-if="record.nftDrawTime != null">
												{{ record.nftDrawTime }}
											</a-col>
										</a-row>
									</template>
									<!--抽奖消耗-->
									<template v-if="column.key==='conInte'">
										<a-row v-if="record.drawMode=='0'">
											<a-col v-if="record.conInte != null">
												{{ record.conInte }}&nbsp;积分
											</a-col>
										</a-row>
										<a-row v-if="record.drawMode=='1'" style="margin-top: 0.5rem">
											<a-col v-if="record.opNftTreChestVo != null">
												<a-image :src="record.opNftTreChestVo.cover" :width="50" :height="50"
														 :key="record.opNftTreChestVo.nftId"/>
											</a-col>
											<a-col style="margin: auto">
												<a @click="this.getNftInfo(record.opNftTreChestVo.nftId)">
													{{ record.opNftTreChestVo.nftName }}
												</a>
												<br/>
												<span>X&nbsp;{{ record.opNftTreChestVo.nftExpQua }}</span>
											</a-col>
										</a-row>
									</template>
									<!--活动奖品-->
									<template v-if="column.key==='name'">
										<a-row v-if="record.prizeId != null" style="margin-top: 0.5rem">
											<a-col>
												<a-image :src="record.cover" :width="50" :height="50"
														 :key="record.prizeId"/>
											</a-col>
											<a-col style="margin: auto">
												<a @click="this.getNftInfo(record.prizeId)">{{ record.name }}</a>
												<br/>
												<span>&nbsp;X&nbsp;1</span>
											</a-col>
										</a-row>
										<a-row v-if="record.prizeId == null" style="margin-top: 0.5rem">
											<a-col style="margin: auto">
												<span>未中奖</span>
											</a-col>
										</a-row>
									</template>
								</template>
							</a-table>
						</a-col>
					</a-row>
					<!--分页插件-->
					<a-flex justify="flex-end">
						<a-pagination
							size="small"
							@change="onChangeGet(pageget.pageNo,this.treId)"
							show-size-changer
							:pageSizeOptions="['5','10','20','50','100']"
							v-model:current="this.pageget.pageNo"
							v-model:page-size="this.pageget.pageSize"
							:total="this.pageget.total"
							:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"/>
					</a-flex>
				</a-modal>
			</div>
		</template>
	</a-card>
</template>

<script>
import {message} from 'ant-design-vue';
import opTreChest from "@/api/nft/activity/opTreChestApi";
import XEditable from '@/components/Editor/index.vue'

const key = 'updatable';
import {
	DownOutlined,
	PlusOutlined,
	DeleteOutlined,
	UserOutlined,
	MinusCircleOutlined,
} from "@ant-design/icons-vue";
import {tinycolor} from "@ctrl/tinycolor";

export default {
	name: "OpTreChest",
	components: {
		DownOutlined,
		PlusOutlined,
		DeleteOutlined,
		UserOutlined,
		MinusCircleOutlined,
		XEditable,
	},
	data() {
		return {
			showNftPrize: 1,
			keyword: null,
			nftkeyword: null,
			opStatus: null,
			large: 10,
			number: 13,
			pagination: 9,
			open: false,
			openGet: false,
			openGetDrawRemark: false,
			span: 0,
			type: null,
			max: 100,
			map: new Map(),
			expQua: null,
			page: {
				pageNo: 1,
				pageSize: 5,
				total: 500
			},
			pageget: {
				pageNo: 1,
				pageSize: 5,
				total: 500
			},
			columns: [
				{
					title: '活动标题',
					dataIndex: 'opTitle',
					key: 'opTitle',
				},
				{
					title: '抽奖方式',
					dataIndex: 'drawMode',
					key: 'drawMode',
				},
				{
					title: '抽奖消耗',
					dataIndex: 'conInte',
					key: 'conInte',
				},
				{
					title: '活动奖品',
					dataIndex: 'opTreChestPrizeVos',
					key: 'opTreChestPrizeVos',
				},
				{
					title: '活动时间范围',
					dataIndex: 'opStartTime',
					key: 'opStartTime',
				},
				{
					title: '创建时间',
					dataIndex: 'createTime',
					key: 'createTime',
				},
				{
					title: '状态',
					dataIndex: 'status',
					key: 'status',
				},
				{
					title: '操作',
					key: 'action'
				}
			],
			columnsget: [
				{
					title: '会员',
					dataIndex: 'userName',
					key: 'userName',
				},
				{
					title: '抽奖时间',
					dataIndex: 'inteDrawTime',
					key: 'inteDrawTime',
				},
				{
					title: '抽奖消耗',
					dataIndex: 'conInte',
					key: 'conInte',
				},
				{
					title: '奖品',
					dataIndex: 'name',
					key: 'name',
				}
			],
			data: [],
			dataget: [],
			treId: null,
			opTreChestInfoBo: {
				id: null,
				opTitle: null,
				drawMode: null,
				conInte: null,
				drawChaNum: null,
				status: null,
				opStartTime: null,
				opEndTime: null,
				opRemark: null,
				opNftTreChestBos: [{
					nftId: null,
					nftExpQua: null
				}],
				opTreChestPrizeBos: [{
					nftId: null,
					prizeQua: null,
					prizeCha: null
				}]
			},
			opTreChestVo: {
				id: null,
				opTitle: null,
				drawMode: null,
				conInte: null,
				drawChaNum: null,
				status: null,
				opStartTime: null,
				opEndTime: null,
				createUser: null,
				createTime: null,
				updateUser: null,
				updateTime: null,
				opRemark: null,
				opNftTreChestVos: [{
					nftId: null,
					nftExpQua: null,
					nftName: null,
					cover: null
				}],
				opTreChestPrizeVos: [{
					nftId: null,
					prizeQua: null,
					prizeCha: null,
					cover: null,
					nftName: null
				}]
			},
			filterInfo: {
				fieldNames: {label: 'name', value: 'id'},
				options: [],
			},
			filterInfoUpdate: {
				fieldNames: {label: 'name', value: 'id'},
				options: [],
			},
			times: [],
			nftTreChestBo: {
				nftId: null,
				nftExpQua: null,
				nftName: null,
			},
			mbDrawNum: {
				mbId: null,
				treChestId: null,
				remDraw: null,
			}
		}
	},
	methods: {
		//查看会员详情
		mbInfo(type) {
			this.$refs.getMb.showGetMb(type);
		},
		//查看产品详情
		getNftInfo(id) {
			this.$refs.getNftInfo.getNft(id);
		},
		tinycolor,
		//查询发送请求
		query() {
			let pageBo = {keyword: this.keyword, status: this.opStatus};
			opTreChest.queryOpTre(this.page.pageNo, this.page.pageSize, pageBo).then((resp) => {
				this.page.pageSize = resp.size;
				this.page.total = resp.total;
				this.data = resp.records;
				console.log(this.data);
			}).catch((error) => {
				console.log(error);
			})
		},
		//添加/编辑保存数据
		addTreChest() {
			console.log(this.opTreChestInfoBo);
			debugger;
			let number = this.maxcha(this.opTreChestInfoBo.opTreChestPrizeBos);
			if (number > 100) {
				message.warning({
					content: '所有奖品总概率不能超过100%,当前总概率为' + number + "% !",
					key,
					duration: 2
				})
			} else {
				//添加
				let formRef = this.$refs.formRef;
				formRef.validate().then((resp) => {
					if (this.opTreChestInfoBo.id == null) {
						this.opTreChestInfoBo.opStartTime = this.times[0];
						this.opTreChestInfoBo.opEndTime = this.times[1];
						opTreChest.addOpTreChest(this.opTreChestInfoBo).then((resp) => {
							console.log(resp)
							this.query();
							this.onClose();
							this.empty();
						}).catch((error) => {
							console.log(error)
						})
					} else {
						this.opTreChestInfoBo.opStartTime = this.times[0];
						this.opTreChestInfoBo.opEndTime = this.times[1];
						if (this.opTreChestInfoBo.drawMode != '1') {
							this.opTreChestInfoBo.opNftTreChestBos = [];
						}
						opTreChest.updateOpTre(this.opTreChestInfoBo).then((resp) => {
							this.query();
							this.onClose();
							this.empty();
						}).catch((error) => {
							console.log(error)
						})
					}
				})

			}
		},
		//查看宝箱活动数据
		getTreChest(type) {
			opTreChest.getOpTC(type).then((resp) => {
				console.log(resp)
				this.opTreChestVo = resp;
				this.openGet = true;
			}).catch((error) => {
				console.log(error)
			})
		},
		//启用宝箱活动
		startOpTre(type) {
			opTreChest.startOpTC(type).then((resp) => {
				this.query();
			}).catch((error) => {
				console.log(error)
			})
		},
		//停用宝箱活动
		stopOpTre(type) {
			opTreChest.stopOpTC(type).then((resp) => {
				this.query();
			}).catch((error) => {
				console.log(error)
			})
		},
		//删除宝箱活动
		delOpTre(type) {
			opTreChest.delOpTC(type).then((resp) => {
				this.query();
			}).catch((error) => {
				console.log(error)
			})
		},
		//查询活动抽奖记录
		queryOpLog(type) {
			let pageBo = {keyword: this.nftkeyword, treId: type};
			opTreChest.queryOpDrawLog(this.pageget.pageNo, this.pageget.pageSize, pageBo).then((resp) => {
				debugger;
				this.treId = type;
				this.pageget.pageSize = resp.size;
				this.pageget.total = resp.total;
				this.dataget = resp.records;
				console.log(this.dataget)
			}).catch((error) => {
				console.log(error)
			})
			this.openGetDrawRemark = true;
		},
		//搜索框
		onSearch() {
			this.page.pageNo = 1;
			this.query();
		},
		//分页
		onChange(pageNo) {
			this.query();
			this.page.pageNo = pageNo;
		},
		//活动记录搜索框
		onSearchGet(type) {
			this.pageget.pageNo = 1;
			this.queryOpLog(type);
		},
		//活动记录分页
		onChangeGet(pageNo, type) {
			this.queryOpLog(type);
			this.page.pageNo = pageNo;
		},
		//添加/编辑宝箱活动抽屉
		showDrawer(type) {
			if (type == null) {
				this.open = true;
				this.resetFields;
			} else {
				opTreChest.getOpTC(type).then((resp) => {
					debugger;
					this.opTreChestInfoBo = resp;
					console.log(resp);
					let opStartTime = this.opTreChestInfoBo.opStartTime;
					let opEndTime = this.opTreChestInfoBo.opEndTime;
					this.times = [opStartTime, opEndTime];
					this.opTreChestInfoBo.opNftTreChestBos = resp.opNftTreChestVos;
					this.opTreChestInfoBo.opTreChestPrizeBos = resp.opTreChestPrizeVos;
					if (this.opTreChestInfoBo.drawMode === 0) {
						this.opTreChestInfoBo.drawMode = "0"
					}
					if (this.opTreChestInfoBo.drawMode === 1) {
						this.opTreChestInfoBo.drawMode = "1"
					}
					if (this.opTreChestInfoBo.status === 0) {
						this.opTreChestInfoBo.status = '0'
					}
					if (this.opTreChestInfoBo.status === 1) {
						this.opTreChestInfoBo.status = '1'
					}
				})
				this.open = true;
			}
		},
		//关闭添加/编辑抽屉
		onClose() {
			this.open = false;
			this.empty();
		},
		//关闭查看的抽屉
		onCloseGet() {
			this.openGet = false;
		},
		//清空添加宝箱活动表单内容
		resetFields() {
			this.$refs['formRef'].resetFields();
			this.times = [];
		},
		//追加奖品设置
		addPrizeTre() {
			this.opTreChestInfoBo.opTreChestPrizeBos.push({
				nftId: null,
				prizeQua: null,
				prizeCha: null
			})
		},
		//删除奖品设置信息行
		delPrizeTre(opTreChestPrizeBo) {
			let index = this.opTreChestInfoBo.opTreChestPrizeBos.indexOf(opTreChestPrizeBo);
			if (index !== 0) {
				this.opTreChestInfoBo.opTreChestPrizeBos.splice(index, 1);
			}
		},
		//渲染选择藏品下拉框（奖品）
		select() {
			let dcNftQueryBo = {type: 4, keyword: "", status: null};
			opTreChest.queryDrawSele(dcNftQueryBo).then((resp) => {
				this.filterInfoUpdate.options = resp.records;
				console.log(resp);
			}).catch((error) => {
				console.log(error)
			})
		},
		//渲染消耗藏品下拉框（抽奖消耗）
		selectAll() {
			let dcNftQueryBo = {type: "", keyword: "", status: null};
			opTreChest.queryNft(dcNftQueryBo).then((resp) => {
				console.log(resp);
				this.filterInfo.options = resp.records;
				let opt = this.filterInfo.options;
				for (let i = 0; i < opt.length; i++) {
					let optElement = opt[i];
					this.map.set(optElement.id, optElement.inventory)
				}
			}).catch((error) => {
				console.log(error);
			})
		},
		//清空添加抽屉的数据
		empty() {
			this.opTreChestInfoBo = {
				id: null,
				opTitle: null,
				drawMode: null,
				conInte: null,
				drawChaNum: null,
				status: null,
				opStartTime: null,
				opEndTime: null,
				opNftTreChestBos: [{
					nftId: null,
					nftExpQua: null
				}],
				opTreChestPrizeBos: [{
					nftId: null,
					prizeQua: null,
					prizeCha: null
				}],
				opRemark: null
			}
			this.times = []
		},
		//藏品数量改变时触发
		maxcha(opTreChestPrizeBos) {
			let inte = 0;
			//获取宝箱奖品设置信息*
			for (let i = 0; i < opTreChestPrizeBos.length; i++) {
				//获取奖品概率
				let newVar = opTreChestPrizeBos[i];
				let prizeCha = newVar.prizeCha;
				this.max = this.max - prizeCha;
				inte = inte + prizeCha;
			}
			if (this.max < 0) {
				this.max = 100;
				return inte;
			}
		},
		//消耗的藏品类型变更时，最大消耗数量也跟着变更
		exp(nftId) {
			let newVar = this.map.get(nftId);
			this.expQua = newVar;
		},
		//判断开始时间和结束时间是否比当前时间早，不能选择比当前日期更早的日期
		disabledDate(current) {
			let today = new Date();
			today.setHours(0, 0, 0, 0);
			return current && current < today;
		},
		//当前填写的藏品数量不能超过库存数量
		reminder(expQua, nftQua) {
			if (expQua < nftQua) {
				message.warning({content: "当前藏品的剩余库存数量为" + newVar + ",请勿超过此数量", key, duration: 2});
			}
		},
	},
	//钩子
	mounted() {
		this.query();
		this.opTreChestInfoBo.drawMode = "0";
		this.select();
		this.selectAll();
	}
}
</script>
<style scoped>
.form {
	width: 24.5rem;
}
</style>
